import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import LayoutTr from '../layout/LayoutTr';
import { _, ParseUtil, DetailUtil } from '../../util/pcPublic';
import { getLabel } from '../../util/common';
import jQuery from 'jquery';

@inject('wfGlobalStore','wfLayoutStore')
@withRouter
@observer
export default class DTable extends React.Component {
    render() {
        const { symbol,wfGlobalStore,wfLayoutStore,lockedFlag,lockedBtnRow,allowXScroll } = this.props;
        const groupid = parseInt(symbol.substring(7)) - 1;
        const { commonParam } = wfGlobalStore;
        const { layouttype } = commonParam;
        const { dataJson,detailMap } = wfLayoutStore;
        const detailLayout = dataJson.etables[symbol] || {};
        const headRow = parseInt(detailLayout.edtitleinrow || 0);
        const tailRow = parseInt(detailLayout.edtailinrow || 0);
        if(headRow == 0 || tailRow == 0 || tailRow <= headRow) {
            return <div>{getLabel(386148,'对不起，表头标识、表尾标识设置异常，无法渲染明细！')}</div>
        }
        if(!detailMap.has(symbol)){
            return <div>表单中不存在此明细表，请检查模板配置！</div>
        }
        const detailObj = detailMap.get(symbol);
        const isCardEdit = DetailUtil.judgeIsCardEdit(detailObj);
        const isSeniorSet = detailLayout.seniorset === "1";
        const lockedColumn = parseInt(detailLayout.edlockedcol || -1);
        const { rowattrs,colattrs,rowheads,ec } = detailLayout;
        let colheads = {...detailLayout.colheads};
        if(lockedFlag === 1){   //冻结区域，只解析部分列
            _.forIn(colheads, (v,k)=>{
                if(parseInt(k.substring(4)) > lockedColumn)
                    delete colheads[k];
            });
        }
        const scrollXClassName = allowXScroll && lockedFlag !== 1 ? "wf-detailScroll" : "";
        let tableStyle = {};
        //let tableStyle = ParseUtil.judgeDetailContainColHide(colattrs) ? {"table-layout":"fixed"} : {}; 
        const rowHeads = ParseUtil.convertRowHeads(rowheads);
        const colHeads = ParseUtil.convertColHeads(colheads, symbol, layouttype, tableStyle, allowXScroll, isSeniorSet);
        const ecMap = ParseUtil.convertEcMap(ec);
        //解析列宽
        let colTdArr = new Array();
        if(!isSeniorSet)
            colTdArr.push(<td style={{width:allowXScroll ? "60px" : "6%"}} />);
        colHeads.map((o,index)=>{
            let colStyle = {width:o.width};
            const colCusAttr = colattrs && colattrs[`col_${o.id}`] || {};
            let colClassName = "";
            if(colCusAttr.hide === "y")
                colClassName += " detail_hide_col";
            if(!!colCusAttr.class)
                colClassName += " "+colCusAttr.class;
            colTdArr.push(<td key={index} style={colStyle} className={colClassName} />);
        });
        //解析数据行
        let trHeadArr = new Array();   //头部行
        trHeadArr.push(<tr key="detailControlWidth" className="detailControlWidth">{colTdArr}</tr>);
        let trDataArr = new Array();   //数据行
        let trTailArr = new Array();   //尾部行
        ParseUtil.parseLayoutImage(detailLayout, tableStyle, trHeadArr);    //解析背景图、悬浮图,置于头部行
        const { currentPageRowArr,rowInfo,currentPageRowMergeInfo } = detailObj;
        rowHeads.map(row=>{
            const rowid = parseInt(row.id);
            const rowCusAttr = rowattrs ? rowattrs["row_"+rowid] : null;
            let addColType = 0;
            const dataRows = tailRow - headRow - 1;
            if(rowid === headRow+1) {    //明细数据行
                if(!isSeniorSet)
                    addColType = 3;
                currentPageRowArr.length>0 && currentPageRowArr.map((_info,index) =>{
                    const { rowIndex,serialNum } = _info;
                    const rowAttr = rowInfo.get(`row_${rowIndex}`);
                    const isLastRow = index === currentPageRowArr.length-1;
                    const detailProps = {rowType:2, addColType, rowIndex, serialNum, lockedFlag, lockedColumn, needHide:rowAttr.get("needHide"), isLastRow, isDetailShow:true, isCardEdit};
                    for(let i=rowid; i<tailRow; i++) {  //高级模式可多行
                        trDataArr.push(<LayoutTr
                            key={`${i}_${rowIndex}`}
                            symbol={symbol}
                            colNum={colHeads.length}
                            rowid={i}
                            rowHeight={`${rowheads[`row_${i}`]||30}px`}
                            rowCusAttr={rowCusAttr}
                            colattrs={colattrs}
                            ecMap={ecMap}
                            detailProps={detailProps}
                            dataRows={dataRows}
                            rowMergeInfo={currentPageRowMergeInfo && currentPageRowMergeInfo.get(`row_${rowIndex}`)}
                        />);
                    }
                });
            }else if(rowid < headRow || (isSeniorSet && rowid > tailRow)){  //头尾非数据行
                if(lockedBtnRow && rowid === 0)
                    return true;
                if(!isSeniorSet)
                    addColType = (rowid === headRow-1) ? 2 : 1;
                const detailProps = {rowType: rowid<headRow?1:3,addColType, lockedFlag, lockedColumn, lockedBtnRow};
                const detailTr = (
                    <LayoutTr
                        key={`row_${rowid}`}
                        symbol={symbol}
                        colNum={colHeads.length}
                        rowid={rowid}
                        rowHeight={`${rowheads[`row_${rowid}`]||30}px`}
                        rowCusAttr={rowCusAttr}
                        colattrs={colattrs}
                        ecMap={ecMap}
                        detailProps={detailProps}
                    />
                );
                if(rowid < headRow)
                    trHeadArr.push(detailTr);
                else
                    trTailArr.push(detailTr);
            }
        });
        if(!isSeniorSet && DetailUtil.judgeDetailContainSum(symbol)){     //扩充添加合计行
            trTailArr.push(<LayoutTr
                key="virtualSumRow"
                symbol={symbol}
                colNum={colHeads.length}
                rowid={headRow-1}   //合计行样式取字段标签所在行
                rowHeight="30px"
                colattrs={colattrs}
                ecMap={ecMap}
                detailProps={{addColType:4}}
            />);
        }

        const diffClass= lockedFlag === 1 ? "_locked" : "";
        return (
            <div className={`excelDetailTableArea${diffClass}`}>
                <div className={`excelDetailFixedHead${diffClass}`}>
                    <table className="excelDetailTable" id={`oTable${groupid}_head${diffClass}`} style={tableStyle}>
                        <tbody>
                            {trHeadArr}
                        </tbody>
                    </table>
                </div>
                <div className={`excelDetailContent${diffClass} ${scrollXClassName}`} onScroll={this.doScrollXEvent.bind(this)}>
                    <table className="excelDetailTable" id={`oTable${groupid}${diffClass}`} name={`oTable${groupid}${diffClass}`} style={tableStyle}>
                        <tbody>
                            {trHeadArr}
                            {trDataArr}
                            {trTailArr}
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }
    doScrollXEvent(){
        const { symbol,wfLayoutStore } = this.props;
        const groupid = parseInt(symbol.substring(7)) - 1;
        DetailUtil.syncDetailScrollXPosition(groupid);
        const { detailMap } = wfLayoutStore;
        const detailObj = detailMap.get(symbol);
        detailObj.batchControlVariableMap({slideprompt_show:false});
    }
}